<template>
  <div class="mainDiv">
    <div class="header">默认账本<i class="el-icon-sort"></i></div>
    <div class="nav">
      <div class="byzcTitle">
        本月支出
      </div>
      <el-tag class="navDate" type="info">{{ date }}</el-tag>
      <div class="byzcContent">￥{{ byzc }}</div>
      <div class="bysr"><span class="bysrTitle">本月收入</span><span class="bysrContent">￥{{ bysr }}</span></div>
      <div class="rjzc"><span class="rjzcTitle">日均支出</span><span class="rjzcContent">￥{{ rjzc }}</span></div>
    </div>
    <record-view :year="year" :month="month"></record-view>
  </div>

</template>
<script>
import {getNowFormatDate} from "@/utils/common";
import recordView from "@/views/detailView/RecordView.vue";

export default {
  components:{
    recordView:recordView
  },
  data() {
    return {
      bysr: "50",
      rjzc: "50",
      byzc: "50",
      date: getNowFormatDate("month"),
      month:"09",
      year:"2024",
    }
  }
}


</script>
<style scoped>
.nav {
  text-align: left;
}

.byzcTitle {
  font-weight: 700;
  font-size: 20px;
  color: black;
}

.byzcContent {
  margin: 20px 0;
  color: #ffffff;
  font-weight: bolder;
  font-size: 40px;
}

.bysr, .rjzc {
  color: black;
}

.bysrContent, .rjzcContent {
  font-weight: 600;
}

.bysr {
  float: left;
  margin-right: 30px;
}

.navDate {
  float: right;
  color: black;
}
</style>